import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../utils/tool_manager.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final double _leadSpace = 16.h;
  final _heightSpace = SizedBox(
    height: 16.h,
  );
  bool _obscureText = true;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: SystemUiOverlayStyle.dark,
      child: Scaffold(
        backgroundColor: Colors.white,
        body: GestureDetector(
          onTap: () => ToolManager.hideKeyboard(context),
          behavior: HitTestBehavior.translucent,
          child: SafeArea(
            bottom: false,
            child: Column(
              children: [
                Expanded(
                  child: SingleChildScrollView(
                    child: Padding(
                      padding: EdgeInsets.only(left: 16.h, right: 16.h),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          SizedBox(
                            height: 103.h,
                          ),
                          Row(
                            children: [
                              Text(
                                'Hello.',
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                  fontSize: 48.sp,
                                  color: Colors.black,
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 8.h,
                          ),
                          Row(
                            children: [
                              Text(
                                'Log into Howay',
                                style: TextStyle(
                                  fontSize: 26.sp,
                                  color: Colors.black,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 59.h,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              _createEmail(),
                            ],
                          ),
                          _heightSpace,
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              _createPassword(),
                            ],
                          ),
                          _heightSpace,
                          _createLoginButton(),
                          _heightSpace,
                          _createRegisterButton(),
                        ],
                      ),
                    ),
                  ),
                ),
                _bottomPrivacyWidget(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  _createEmail() => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Email:',
            textAlign: TextAlign.left,
            style: TextStyle(
              fontSize: 16.sp,
              color: Colors.black,
              fontWeight: FontWeight.w600,
            ),
          ),
          SizedBox(
            width: 1.sw - _leadSpace * 2,
            child: TextField(
              controller: _emailController,
              decoration: const InputDecoration(border: InputBorder.none),
              style: TextStyle(
                color: Colors.black,
                fontSize: 16.sp,
                fontWeight: FontWeight.w400,
              ),
            ),
          ),
          Container(
            width: 1.sw - _leadSpace * 2,
            height: 1,
            color: Colors.black,
          ),
        ],
      );

  _createPassword() => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            textAlign: TextAlign.left,
            'Password:',
            style: TextStyle(
              fontSize: 16.sp,
              color: Colors.black,
              fontWeight: FontWeight.w600,
            ),
          ),
          Row(
            children: [
              SizedBox(
                width: 1.sw - _leadSpace * 2 - 31.h,
                child: TextField(
                  controller: _passwordController,
                  decoration: const InputDecoration(border: InputBorder.none),
                  obscuringCharacter: '*',
                  obscureText: _obscureText,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ),
              GestureDetector(
                onTap: _securityClick,
                child: Image(
                  width: 31.h,
                  height: 25.h,
                  image: _obscureText
                      ? const AssetImage('assets/icon/login_security.png')
                      : const AssetImage('assets/icon/login_unsecurity.png'),
                ),
              ),
            ],
          ),
          Container(
            width: 1.sw - _leadSpace * 2,
            height: 1,
            color: Colors.black,
          ),
        ],
      );

  _securityClick() {
    _obscureText = !_obscureText;
    setState(() {});
  }

  _createLoginButton() => GestureDetector(
        onTap: () => _login(_emailController.text, _passwordController.text),
        child: Container(
          alignment: Alignment.center,
          width: 1.sw - 32.h,
          height: 40.h,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.all(Radius.circular(6.h)),
            shape: BoxShape.rectangle,
          ),
          child: Text(
            textAlign: TextAlign.center,
            'Sign in',
            style: TextStyle(
              fontSize: 16.sp,
              color: Colors.white,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      );

  _login(String email, String password) {
    if (email.isEmpty || password.isEmpty) {
      EasyLoading.showError('Email or Password cannot be empty');
      return;
    }

    EasyLoading.showInfo("Login...");
  }

  _createRegisterButton() => GestureDetector(
        onTap: () => EasyLoading.showInfo("Register..."),
        child: Container(
          alignment: Alignment.center,
          width: 1.sw - 32.h,
          height: 40.h,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.all(Radius.circular(6.h)),
            shape: BoxShape.rectangle,
          ),
          child: Text(
            textAlign: TextAlign.center,
            'Register',
            style: TextStyle(
              fontSize: 16.sp,
              color: Colors.white,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      );

  _bottomPrivacyWidget() => Container(
        color: Colors.black,
        height: 95.h + MediaQuery.of(context).padding.bottom,
        child: Column(
          children: [
            SizedBox(
              height: 95.h,
              child: DefaultTextStyle(
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.white,
                  fontWeight: FontWeight.w600,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text(
                      ' © Howay. All Rights Reserved.',
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        GestureDetector(
                          child: Text(
                            'Privacy Statement',
                            style: TextStyle(
                              color: Colors.blue[200],
                            ),
                          ),
                          onTap: () =>
                              EasyLoading.showInfo("goToPrivacyWebView..."),
                        ),
                        const Text(
                          '  |  ',
                        ),
                        GestureDetector(
                          child: Text(
                            'Terms of Service',
                            style: TextStyle(
                              color: Colors.blue[200],
                            ),
                          ),
                          onTap: () =>
                              EasyLoading.showInfo("goToPrivacyWebView..."),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      );
}
